<template>
  <view class="content">
    <view class="int-body">
      <title :title="title"></title>
      <!-- <button type="primary" @click="getImgBase64">上传图片</button> -->
      <view class="int-content" v-if="productPic">
        <view
          class="int-con-pro"
          v-for="(item, index) in productPic"
          :key="index"
        >
          <!-- <image :src="base64"></image> -->
          <image :src="getPicPath(item.picture)"></image>
          <p>{{ item.title }}</p>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import title from "../common/Title.vue";
// 引入baseUrl
import { baseUrl } from "@/api/request.js";
export default {
  name: "introduction",
  props: {
    productPic: Array,
  },
  components: {
    // 标题栏
    title,
  },

  data() {
    return {
      title: "产品展示",
      base64: "",
      picPath: "",
    };
  },
  created() {},
  mounted() {},
  methods: {
    getImgBase64() {
      wx.chooseImage({
        // count: 1,
        // sizeType: "compressed",
        // sourceType: ["album", "camera"],
        success: (res) => {
          wx.getFileSystemManager().readFile({
            filePath: res.tempFilePaths[0], //选择图片返回的相对路径
            encoding: "base64", //编码格式
            success: (res) => {
              //成功的回调
              console.log("data:image/png;base64," + res.data);
              this.base64 = "data:image/png;base64," + res.data;
            },
          });

          //以下两行注释的是同步方法，不过我不太喜欢用。
          //let base64 = wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], 'base64')
          //console.log(base64)
        },
      });
    },
    async updataImg() {
      const { data: res } = await this.$http.post("goods", form);

      if (res.meta.status !== 201) {
        return console.log("上传图片失败");
      }

      console.log("上传图片成功!");
    },
    getPicPath(picture) {
      let path = picture;
      path = path.replace("static", "");
      path = path.replace(/\\/g, "/");
      path = baseUrl + path;
      return path;
    },
  },
  computed: {},
};
</script>
<style lang="scss" scoped>
body {
  display: flex;
  // flex-direction: column;
  // align-items: center;
  // justify-content: center;
}

.content {
  width: 730rpx;
  background-color: white;
  margin-top: 60rpx;
  border-radius: 20rpx;
  padding-bottom: 40rpx;
  border-bottom: 4rpx solid aliceblue;

  .int-body {
    // .int-title {
    //   padding: 15px 0;
    //   text-align: center;
    //   border-radius: 10px;
    //   border-bottom: 2px solid aliceblue;

    //   .title {
    //     color: #595959;
    //     font-size: 16px;
    //     padding: 0 15px;
    //   }

    //   .line {
    //     color: #b3aeae;
    //   }
    // }

    .int-content {
      // display: inline-block;
      // position: relative;
      display: flex;
      flex-direction: row;
      // align-items: center;
      flex-wrap: wrap;
      justify-content: space-around;
      border-radius: 20rpx;

      .int-con-pro {
        border-radius: 20rpx;
        padding: 10px 0;
        width: 300rpx;
        height: 428rpx;

        image {
          width: 300rpx;
          height: 400rpx;
        }

        p {
          font-size: 14px;
          color: #595959;
          padding-top: 5px;
          text-align: center;
        }
      }
    }
  }
}
</style>